{% extends "../_base/layout.html" %} 
{% block css %}
<link rel="stylesheet" href="{{site.static}}/css/service_question.css"> 
{% endblock %} 
{% block content %} 
    {% block header%} 
        {% set pageHeaderConf = {pageTitle: __("service_game_page_title"),level:2,icon:'eui-icon-grid btn-show-siderbar'} %} 
        {%include "../_base/page_header.html"%} 
    {% endblock %}

{% from "../_base/data_list.html" import questionList %}   

<div class="eui-main-container question-main-container eui--padding-b-0 eui--position-rel">
    {% block searchBanner%} 
        {%include "../common/service_search_banner.html"%} 
    {% endblock %}

    <div class="eui-card eui--white-bacg question-list">
        <div class="eui-card-header">{{__("service_game_card_title")}}</div>
        <div class="eui-card-content">
            {{ questionList('dataList') }}
        </div>
        <div class="eui-card-footer eui--bebebe-color eui--text-center eui--font-24">
            {{__("service_question_page_tips")}}
        </div>
    </div>
    <div class="eui-screen-wrap eui--text-center">
        <a href="javascript:;">
            <span class="eui-icon eui-icon-secretary"></span>
            <p class="eui--font-26 eui--black-color">{{__("service_secretary")}}</p>
        </a>
    </div>
</div>

{% block allGame%}
{% include "../common/all_game.html" %} 
{% endblock %}  

<script>
     $('.btn-show-siderbar').click(function(){
        $('#siderbar').animate({
            "right":'0'
        },500,function(){
            $('#page_banner').hide();
            $('#card_header').hide();
        });
    });
    $('#btn_back_siderbar').click(function(){
        $('#siderbar').animate({
            "right":'-100%'
        },500);
    });
</script>
{% endblock %}
